<template>
  <div class="content-box">
    <div class="tab-box flex ac">
      <div class="charging-tab-box flex ac">
        <div
          @click="tabActive = item.id"
          class="charging-tab-box-items"
          :class="tabActive == item.id ? 'charging-tab-box-items-active' : ''"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 平台计费 -->
    <div class="padding-box" v-if="tabActive == 1">
      <div class="search-box">
        <el-form
          :inline="true"
          :model="searchFormInline"
          class="demo-form-inline"
        >
          <el-form-item>
            <el-button class="add-charging" type="primary" :icon="Plus" @click="dialogVisibleCharging=true">
              创建计费
            </el-button>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchFormInline.value" placeholder="">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="search-btn" type="primary" @click="">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          height="100%"
          stripe
          :header-cell-style="{
            color: '#828A9D',
            textAlign: 'center',
            height: '60px',
          }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }"
        >
          <el-table-column fixed prop="date" label="区域" />
          <el-table-column prop="name" label="每日封顶（元）" />
          <el-table-column prop="state" label="收费单价（元）" />
          <el-table-column prop="city" label="每收费单价时长（分钟）" />
          <el-table-column prop="address" label="免费时长（分钟）" />
          <el-table-column prop="zip" label="操作">
            <template #default="scope">
              <el-button type="primary" link>编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box flex jc">
        <el-pagination
          v-model:page-size="searchForm.pageSize"
          v-model:current-page="searchForm.page"
          :total="searchForm.totalAll"
          @change="sizePageChangeFunc"
          background
          layout="total,sizes,prev, pager, next,jumper"
        />
      </div>
    </div>
    <!-- 代理商/商家手续费 -->
    <div class="padding-box" v-if="tabActive == 2 || tabActive == 3">
      <div class="bg-white">
        <el-form
          :model="erviceChargeForm"
          label-width="140px"
          label-position="left"
        >
          <el-form-item class="el-form-item-box" label="提现手续费">
            <el-input
              v-inputLimt="2"
              class="input-form-charging-box"
              v-model="erviceChargeForm.name"
            />
            <span class="input-form-charging-box-tips">元/笔</span>
          </el-form-item>
          <el-form-item class="el-form-item-box" label="提现手续费">
            <el-input
              v-inputLimt="2"
              class="input-form-charging-box"
              v-model="erviceChargeForm.name"
            />
            <span class="input-form-charging-box-tips">千分之</span>
          </el-form-item>
          <el-form-item class="el-form-item-box" label="提现手续费">
            <el-input
              v-inputLimt="2"
              class="input-form-charging-box"
              v-model="erviceChargeForm.name"
            />
            <span class="input-form-charging-box-tips">元</span>
          </el-form-item>
          <el-form-item class="el-form-item-box" label="提现手续费">
            <el-input
              v-inputLimt="2"
              class="input-form-charging-box"
              v-model="erviceChargeForm.name"
            />
            <span class="input-form-charging-box-tips">元</span>
          </el-form-item>
          <el-form-item class="el-form-item-box" label="">
            <div class="btn-box-charging-box">
              <el-button class="btn-cancel">取消</el-button>
              <el-button class="btn-submit">修改</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!-- 创建计费 -->
  <chargingCom
    :show="dialogVisibleCharging"
    @onClose="dialogVisibleCharging = false"
  ></chargingCom>
</template>
<script setup>
import { onMounted, reactive, toRefs, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import chargingCom from '@/components/chargingCom/index.vue'
onMounted(() => {
  console.log('index')
})
let searchForm = ref({
  pageSize: 10,
  page: 1,
  totalAll: 0,
})
let dialogVisibleCharging = ref(false);
const sizePageChangeFunc = e => {
  console.log(searchForm.value)
}
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
let searchFormInline = ref({})
let tabActive = ref(1)
let tabList = ref([
  {
    name: '平台计费',
    num: 3,
    id: 1,
  },
  {
    name: '代理商手续费',
    num: 213,
    id: 2,
  },
  {
    name: '商家手续费',
    num: 433,
    id: 3,
  },
])
// 提交手续费
let erviceChargeForm = ref({})
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
